<template>
  <div class="smart-clip">
    <RouteTitle :isBack="true" />

    <div class="smart-clip-content">
      <div class="search-area">
        <div class="n-grid">
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">ID</a-button>
              <a-input
                v-model:value="searchParams.task_id"
                placeholder="请输入ID"
                allowClear
                style="width: calc(100% - 130px)"
              />
            </div>
          </div>

          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">状态</a-button>
              <a-select
                allowClear
                placeholder="请选择状态"
                v-model:value="searchParams.status"
                style="width: calc(100% - 130px)"
              >
                <a-select-option :value="0">未处理</a-select-option>
                <a-select-option :value="1">处理中</a-select-option>
                <a-select-option :value="2">处理成功</a-select-option>
                <a-select-option :value="3">处理失败</a-select-option>
              </a-select>
            </div>
          </div>
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">提取时间</a-button>
              <a-range-picker
                style="width: calc(100% - 130px); border-radius: 0 5px 5px 0"
                v-model:value="searchParams.dateTime"
              />
            </div>
          </div>
          <div class="n-grid-item last-gird-item">
            <div class="n-input-group grid-btn">
              <a-button
                @click="handleQueryThis('search')"
                type="primary"
                style="border-radius: 5px"
              >
                <SearchOutlined />查询
              </a-button>
              <a-button
                @click="handleQueryThis('reset')"
                style="margin-left: 10px; border-radius: 5px"
              >
                <ReloadOutlined />重置
              </a-button>
            </div>
          </div>
        </div>
      </div>
      <div class="table-content">
        <div class="mb-10 flex justify-end">
          <a-button type="primary" @click="goToAdd">新建提取任务</a-button>
        </div>
        <a-table
          :pagination="{ pageSize: pageSize, current: page, total: total }"
          :scroll="{ x: 1500 }"
          :columns="columns"
          :dataSource="dataList"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key == 'video_url'">
              <div class="image_con" v-if="record?.video_url">
                <video
                  style="width: 100%"
                  v-if="record?.cover_url == ''"
                  :src="record?.video_url"
                ></video>

                <img v-if="record?.cover_url !== ''" :src="record?.cover_url" />
                <div class="operate_con">
                  <cu-icon
                    @click="goDouyin(record)"
                    type="icon-24gl-playCircle"
                    style="font-size: 36px; color: #fff"
                  />
                </div>
                <div class="bottom_con">
                  <span>视频</span>
                  <cu-icon
                    type="icon-changjing"
                    style="font-size: 14px; color: #fff; margin-left: 3px"
                  />
                </div>
              </div>
              <div v-else>-</div>
            </template>
            <template v-if="column.key == 'status'">
              <a-tag
                v-if="record?.status == 0 || record?.status == 1"
                :bordered="false"
                color="processing"
                >{{ record?.status_txt }}</a-tag
              >
              <a-tag
                v-else-if="record?.status == 2"
                :bordered="false"
                color="success"
                >{{ record?.status_txt }}</a-tag
              >
              <a-tag v-else :bordered="false" color="error">{{
                record?.status_txt
              }}</a-tag>
            </template>
            <template v-if="column.key == 'contents'">
              <!-- <a-popover v-if="record?.contents" trigger="click">
                <template #content>
                  <span>
                    {{ record?.contents }}
                  </span>
                </template> -->
              <a-typography-paragraph
                v-if="record?.contents"
                class="text-records"
                :ellipsis="{ rows: 5, expandable: false }"
                :content="record?.contents"
                @click="openText(record?.contents)"
              />
              <!-- </a-popover>
               -->
              <div v-else>-</div>
            </template>
            <template v-if="column.key == 'action'">
              <a-button
                type="link"
                @click="handleCopy(record)"
                v-if="record.status == 2"
                >复制</a-button
              >
              <!-- <a-button
                type="link"
                @click="handleSaveMaterial(record)"
                v-if="record.status == 2"
                >保存到文案库</a-button
              > -->
              <a-button
                type="link"
                @click="handleTextToAudio(record)"
                v-if="record.status == 2"
                >文字转语音</a-button
              >
              <a-popconfirm
                title="确定要删除此项吗?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDelete(record)"
                @cancel="() => {}"
              >
                <a-button type="link">删除</a-button>
              </a-popconfirm>
              <MoreButton :disabled="record.status!=2"  materialType="text"  :routeNames="[{name:'存文案库',key:'saveToText',loading:false},{name:'下载',key:'download',loading:false}]" :data="record"></MoreButton>
            </template>
            <template v-if="column.dataIndex === 'text_source'">
              <a-tooltip placement="top">
                <template #title>
                  <span
                    class="text-records"
                    id="url"
                    @click="copyDomText('url')"
                    >{{ record.text_source }}</span
                  >
                </template>
                <span class="text-records">
                  {{
                    record.text_source
                      ? record.text_source.slice(0, 50) + "..."
                      : " - "
                  }}
                </span>
              </a-tooltip>
            </template>
          </template>
        </a-table>
      </div>
    </div>

    <a-modal
      v-model:visible="Textvisible"
      :footer="null"
      title="内容预览"
      @ok="handleOk"
      style="width: 780px"
    >
      <p>{{ Textcontent }}</p>

      <div class="footer">
        <a-space>
          <a-button
            @click="handleOk"
            ghost
            type="primary"
            style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
            >取消</a-button
          >
          <a-button
            type="primary"
            style="border: none; border-radius: 5px"
            @click="$utils.copyText(Textcontent)"
            >复制全部</a-button
          >
        </a-space>
      </div>
    </a-modal>
    <MaterialsModule
      material_type="text"
      :visible="saveVisible"
      :data="currentSaveData"
      @onCancel="handleSaveCancel"
      @onSuccess="handleSaveConfirm"
    />
    <PreviewModal
      :visible="previewVisible"
      :title="previewParams.title"
      :url="previewParams.url"
      :type="previewParams.type"
      @onCancel="previewVisible = false"
    />
  </div>


    <BatchCollect
    ref="BatchCollectRef"
    :articles="chooseTextArticle"
    :istiqu="true"
  ></BatchCollect>
</template>

<script>
import { createVNode, reactive, toRefs } from "vue";
import {
  ReloadOutlined,
  SearchOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import request from "../../../common/utils/request";
import MaterialsModule from "../components/MaterialsModule/materialLibraryModal.vue";
import PreviewModal from "@/components/PreviewModal/index.vue";
import BatchCollect from "@/views/shotstack/AiCreation/components/batchCollect.vue";
import MoreButton from "@/views/shotstack/CreationCenter/components/routeToButton.vue";
import { message, Modal } from "ant-design-vue";
export default {
  name: "VideoToTextList",
  components: {
    ReloadOutlined,
    SearchOutlined,
    ExclamationCircleOutlined,
    MaterialsModule,
    PreviewModal,
    BatchCollect,
    MoreButton,
  },
  setup() {
    const searchParams = reactive({
      task_id: "",
      status: null,
      dateTime: null,
    });
    const state = reactive({
      BatchCollectRef :null,
      chooseTextArticle: [],
      previewParams: {
        title: "",
        url: "",
        type: "video",
      },
      Textcontent: "",
      saveVisible: false,
      currentSaveData: {},
      dataList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      Textvisible: false,
      previewVisible: false,
      columns: [
        {
          title: "封面",
          dataIndex: "video_url",
          key: "video_url",
          width: 200,
        },
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
          width: 100,
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          width: 100,
        },
        {
          title: "提取内容",
          dataIndex: "contents",
          key: "contents",
          width: 460,
        },
        {
          title: "提取时间",
          dataIndex: "created_at",
          key: "created_at",
          width: 180,
        },
        {
          title: "素材来源",
          dataIndex: "text_source",
          key: "text_source",
          // width: 180,
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: 360,
          fixed: "right",
        },
      ],
    });
    const router = useRouter();

    const getList = () => {
      state.loading = true;
      const params = {
        page: state.page,
        pageSize: state.pageSize,
        id: searchParams.task_id,
        status: searchParams.status,
      };

      if (searchParams.dateTime) {
        params.created_start_time = dayjs(searchParams.dateTime[0]).format(
          "YYYY-MM-DD"
        );
        params.created_end_time = dayjs(searchParams.dateTime[1]).format(
          "YYYY-MM-DD"
        );
      }

      if (state.dateTime) {
        params.created_start_time = dayjs(state.dateTime[0]).format(
          "YYYY-MM-DD"
        );
        params.created_end_time = dayjs(state.dateTime[1]).format("YYYY-MM-DD");
      }

      state.dataList = [];
      request
        .get("work_ai", "/user/shotstack/video/conver/text/lists", params)
        .then((res) => {
          state.dataList = res.list;
          state.total = res?.total;
          state.loading = false;
        })
        .catch((err) => {
          state.loading = false;
        });
    };

    const handleCopy = (record) => {
      navigator?.clipboard
        ?.writeText(record?.contents)
        .then(() => {
          message.success("复制成功！");
        })
        .catch(() => {
          message.error("复制失败！");
        });
    };

    const handleSaveMaterial = (record) => {
      if (!record?.contents) {
        message.warn("暂无文案");
        return;
      }
       state.chooseTextArticle = [
    {
      title: record?.video_data?.title,
      content: record?.contents,
      sub_title: "",
    },
  ];

       state.BatchCollectRef.showModal();
    };
    const handleTextToAudio = (record) => {
      if (record?.contents) {
        // window.open(record?.video_data?.audio_url)
        router.push({
          name: "TextToSpeech",
          query: {
            contents: record?.contents,
          },
        });
      } else {
        message.warn("暂无文案");
      }
    };

    const handleDelete = (record) => {
      request
        .del("/work_ai", "/user/shotstack/video/conver/text/delete", {
          id: record?.id,
        })
        .then((res) => {
          message.success("删除成功");
          getList();
        });
    };

    getList();

    const goToAdd = () => {
      router.push({
        name: "AddVideoToText",
      });
    };

    const handleQueryThis = (type) => {
      if (type == "search") {
        getList();
      } else {
        searchParams.task_id = "";
        searchParams.status = null;
        searchParams.dateTime = null;
        state.page = 1;
        state.pageSize = 10;
        state.total = 0;
        getList();
      }
    };

    const goDouyin = (record) => {
      // if (record?.video_source == "material") {
      state.previewParams = {
        title: record?.video_data?.title,
        url: record?.video_url,
        type: "video",
      };
      state.previewVisible = true;
      // } else {
      //   window.open(record?.video_data?.play_url);
      // }
    };

    const handleTableChange = ({ current, pageSize }) => {
      state.page = current;
      state.pageSize = pageSize;
      getList();
    };

    const handleSaveCancel = () => {
      state.saveVisible = false;
    };

    const handleSaveConfirm = () => {
      state.saveVisible = false;
    };

    const copyDomText = (id) => {
      const node = document.getElementById(id);
      if (node) {
        let createRange = document.createRange();
        createRange.selectNodeContents(document.getElementById(id));
        const selection = document.getSelection();
        selection.removeAllRanges();
        selection.addRange(createRange);
        document.execCommand("Copy");
        selection.removeAllRanges();
        message.success("已复制");
      }
    };

    const handleOk = () => {
      state.Textvisible = false;
      state.Textcontent = "";
    };

    const openText = (data) => {
      state.Textvisible = true;
      state.Textcontent = data;
    };

    return {
      searchParams,
      copyDomText,
      handleOk,
      ...toRefs(state),
      goToAdd,
      openText,
      handleCopy,
      handleSaveMaterial,
      handleTextToAudio,
      handleDelete,
      handleQueryThis,
      goDouyin,
      handleTableChange,
      handleSaveCancel,
      handleSaveConfirm,
    };
  },
};
</script>

<style lang="less" scoped>
.image_con {
  cursor: pointer;
  width: 140px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  position: relative;

  img {
    max-width: 100%;
    max-height: 100%;
  }

  .operate_con {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
  }

  &:hover {
    .operate_con {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .bottom_con {
    width: 100%;
    height: 30px;
    left: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    font-size: 12px;
    padding-left: 5px;
  }
}

.smart-clip {
  padding: 14px 14px 0;
}

.smart-clip-header {
  display: flex;
  height: 220px;
  margin: 20px 0;
}

.smart-clip-header-title {
  font-size: 24px;
}

.smart-clip-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 700px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.smart-clip-header-right {
  width: calc(100% - 700px);
  margin-left: 20px;
}

.segment {
  width: 260px;
  display: flex;
  padding: 5px;
  background-color: #ff916514;
}

.segment-item {
  --n-tab-border-radius: 6px;
  overflow: hidden;
  border-radius: var(--n-tab-border-radius);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ac7e7d;
}

.active-tab {
  box-shadow: 4px 4px 10px #2878ff33;
  background-color: #fff;
  color: #2878ff;
}

.data-item {
  padding: 16px 15px;
  border-radius: 16px;
  background: #ffffff;
  min-width: 150px;
  min-height: 128px;
  flex-shrink: 0;
}

.data-value {
  font-family: DIN Alternate Bold;
  font-size: 26px;
  font-weight: 700;
  margin-top: 10px;
}

.menu-list {
  display: flex;
}

.menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-width: 180px;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  height: 220px;
  transition: all 0.3s;
}

.menu-item-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
}

.menu-item-img {
  width: 110px;
}

.menu-item-title {
  font-size: 18px;
}

.ml-16 {
  margin-left: 16px;
}

.custom:before,
.ai-build:before {
  background: linear-gradient(
    46deg,
    #fcfcfc 0%,
    #e8e5fa 44%,
    #e8e5fa 56%,
    #e8e5fa 68%,
    #f6f6f6 100%
  );
  opacity: 0;
}

.fast:before {
  background: linear-gradient(46deg, #fcfcfc 0%, #dff5fa 56%, #fcfcfc 100%);
  opacity: 0;
}

.script:before {
  background: linear-gradient(46deg, #fcfcfc 0%, #deebff 56%, #f6f6f6 100%);
}

.menu-item:hover:before {
  opacity: 1;
}

.image_text:before {
  background: linear-gradient(
    46deg,
    #f4d0d1 0%,
    #f7efea 44%,
    #f7f0ea 56%,
    #f7efe9 68%,
    #f8e1df 100%
  );
  opacity: 0;
}

.menu-item:hover .menu-item-img,
.menu-item:hover .menu-item-title {
  transform: translateY(-5px) scale(1.05);
}

.menu-item .menu-item-img {
  width: 110px;
  transition: all 0.3s;
}

.menu-item:before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s;
}

.content-title {
  font-size: 24px;
}

.n-grid {
  display: flex;
}

.search-area {
  // min-width: 1200px;
  margin-top: 10px;

  button {
    border-radius: 5px 0 0 5px;
  }

  .ss-input-affix-wrapper {
    border-radius: 0 5px 5px 0;
  }

  .ss-select {
    border-radius: 0 5px 5px 0;
  }
}

/* 当屏幕宽度大于等于 1200px 时应用的样式 */
@media screen and (min-width: 1200px) {
  /* 在这里添加针对 1200px 及以上屏幕宽度的样式 */
  .n-grid {
    display: grid;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    gap: 20px 16px;
  }

  .last-gird-item {
    grid-column: 4 / span 1 !important;
    display: flex;
    justify-content: flex-end;
  }
}

/* 当屏幕宽度小于 1199px 时应用的样式 */
@media screen and (max-width: 1199px) {
  /* 在这里添加针对 799px 及以下屏幕宽度的样式 */
  .n-grid {
    display: grid;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 20px 16px;

    .last-gird-item {
      grid-column: 2 / span 1;
    }
  }
}

.n-grid-item {
  grid-column: span 1 / span 1;
}

.hidden-grid-item {
  display: none;
}

.n-input-group {
  display: inline-flex;
  width: 100%;
  flex-wrap: nowrap;
  vertical-align: bottom;
}

.grid-btn {
  display: flex;
  justify-content: flex-end;
}

.table-content {
  margin-top: 30px;
}

.script .mask-opacity {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed rgba(255, 101, 98, 0.5);
}

.script:hover .mask-opacity {
  opacity: 1;
}

button {
  border-radius: 5px;
}

:deep(.ss-select-selector) {
  border-radius: 0 5px 5px 0 !important;
}

.text-records {
  cursor: pointer;
}

.footer {
  width: 100%;
  text-align: right;
  margin-top: 40px;
}
</style>
